{% extends "base.html" %}
{% block head %}
  {{ super() }}
  {% if article.summary %}
    <meta name="description" content="{{ article.summary }}" />
  {% endif %}

  {% for tag in article.tags %}
    <meta name="tags" content="{{tag}}" />
  {% endfor %}
  <!-- 替换部分base的样式，看文章时，要再宽一点，右边有很多空间可以撑开 -->
  <link rel="stylesheet" type="text/css" href="{{ SITEURL }}/theme/css/mycss/article.css" />

{% endblock %}
{% block twittercard %}
{% if article.cover_image %}
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="{{ SITEURL }}/images/{{ article.cover_image }}">
<meta name="twitter:creator" content="{{ TWITTER_USERNAME }}">
{% elif GRAVATAR %}
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="{{ GRAVATAR }}">
{% elif LOGO %}
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="{{ SITEURL }}/images/{{ LOGO }}">
{% endif %}
<meta name="twitter:site" content="{{ TWITTER_USERNAME }}">
<meta name="twitter:title" content="{{ article.title }}">
<meta name="twitter:description" content="{{ article.summary }}">
{% endblock twittercard %}
<!-- OG Tags -->
{% block ogtags %}
<meta property="og:url" content="{{ SITEURL }}/{{ article.url }}"/>
<meta property="og:title" content="{{ SITENAME }} | {{ article.title }}" />
<meta property="og:description" content="{{ article.summary }}" />
{% if article.cover_image %}
<meta property="og:image" content="{{ SITEURL }}/images/{{ article.cover_image }}" />
{% endif %}
{% endblock ogtags %}

{% block content %}
  <div class="article" role="article">
    <article>
      {% if article.date %}
        <footer>
            <a name="top"></a>
            <p>
              <time datetime=" {{ article.date }}">
                <script>document.write(moment('{{ article.date }}').format('LL'));</script>
              </time>
              ~
              <time datetime=" {{ article.date }}">
                <script>document.write(moment('{{ article.modified }}').format('LL'));</script>
              </time>
            </p>
        </footer>
      {% endif %}
        <header>
          <h2>
            {{ article.title }}
          </h2>
        </header>
      <div class="content">
         {{ article.content|safe }}
      </div>
      <div class="back-to-top">
        <a href="/">HOME</a>
        <a href="#top">TOP</a>
      </div>
      {% if DISQUS_SITENAME %}
      <div id="disqus_thread"></div>
        {% if SITEURL %}
        <script>
          var disqus_config = function () {
          this.page.url = "{{ SITEURL }}/{{ article.url }}";  // Replace PAGE_URL with your page's canonical URL variable
          this.page.identifier = "{{ article.slug }}"; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
          };
        </script>
        {% endif %}
        <script>
        (function() {
              var d = document, s = d.createElement('script');
              s.src = 'https://{{ DISQUS_SITENAME }}.disqus.com/embed.js';
              s.setAttribute('data-timestamp', +new Date());
              (d.head || d.body).appendChild(s);
        })();
      </script>
      <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
      {% endif %}
    </article>
  </div>
<!-- end article -->
<!-- 页面往下滚动一段之后才会显示TOC -->
<script>
  window.onscroll = function() {
    var tocbox = document.getElementsByClassName('toc')[0];
    var osTop = document.documentElement.scrollTop || document.body.scrollTop;
    var osWidth = document.documentElement.scrollWidth || document.body.scrollWidth;
    // console.log(osTop)
    if (osTop>300 && osWidth>865) {
      tocbox.style.display = "block"
    }
    if (osTop<300 || osWidth<865) {
      tocbox.style.display = "none"
    }
  }
</script>
{% endblock content %}